<template>
  <div class="material">
      <div class="next-step">
          <mt-button @click="skip" class="next-step-btn" type="default">跳过</mt-button>
      </div>
      <div class="up-image">
          <input type="file" @change="upImage" accept="image/gif,image/jpeg,image/jpg,image/png" ref="file" title=" ">
          <img :src="userUrl" alt="">
      </div>
      <div class="form-material">
          <input @blur="verifyName" class="form-material-name mint-field-core" placeholder="昵称" type="text" v-model="userName">
          <mt-radio
            class="form-material-sex clear-fix"
            align="right"
            v-model="userSex"
            :options="options">
          </mt-radio>
      </div>
      <div class="hint-sex">注册成功后，性别不可以修改</div>
      <div class="next-step-up">
          <mt-button @click="nextStep" class="next-step-btn" type="default">下一步</mt-button>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            userSex: '1',
            userName: '',
            userUrl: '',
            repetition: false, //昵称是否使用
            options: [
                {
                    label: '男',
                    value: '1'
                },
                {
                    label: '女',
                    value: '0'
                }
            ]
        }
    },
    methods: {
        skip() {
            this.$router.push({ path: '/login' })
        },
        // 上传头像
        upImage() {
            let file = this.$refs.file.files[0]
            let fd = new FormData()
            fd.append('file', file)
            if (file) {
                this.utils.$post(
                    this.utils.UP_IMAGE,
                    data => {
                        this.userUrl = data.data
                    },
                    fd
                )
            }
        },
        // 判断昵称是否已使用
        verifyName() {
            // this.$router.push({ path: '/login' })
        },
        // 完善资料
        nextStep() {
            if (this.userName.length >= 15 || this.userName.length <= 2) {
                return alert('请填写正确的昵称')
            }
            this.utils.$get(
                this.utils.CHENK_USER_NAME,
                data => {
                    if (data.data == 0) {
                        this.repetition = true
                        if (!this.repetition) {
                            return alert('该昵称已使用')
                        }
                        if (!this.userUrl) {
                            return alert('请上传头像')
                        }
                        let userMessage = {
                            userSex: this.userSex,
                            userName: this.userName,
                            userUrl: this.userUrl
                        }
                        this.utils.$post(
                            this.utils.SET_USET_MESSAGE,
                            data => {
                                alert('填写成功')
                                this.$router.push({ path: '/login' })
                            },
                            userMessage
                        )
                    }
                },
                { userNmae: this.userName }
            )
        }
    }
}
</script>

<style lang="less">
@mainColor: #00d8c9;
.material {
    padding: 0 0.6rem;
    .next-step {
        padding: 0.3rem 0 0 0;
        .next-step-btn {
            height: 0.52rem;
            width: 1.4rem;
            border-radius: 0.5rem;
            color: #999;
            line-height: 0.52rem;
            text-align: center;
            float: right;
            font-size: 0.24rem;
        }
    }
    .up-image {
        width: 2rem;
        height: 2rem;
        margin: 1rem auto;
        position: relative;
        background: url('../../assets/头像@2x.png') no-repeat center/cover;
        > input {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 999;
            opacity: 0;
        }
        > img {
            border-radius: 50%;
            overflow: hidden;
            width: 2rem;
            height: 2rem;
            position: absolute;
        }
    }
    .form-material {
        height: 3rem;
        .mint-field-core {
            border: none;
            border-radius: 0;
            border-bottom: 1px solid #e5e5e5;
            color: #333;
            font-size: 0.28rem;
            padding-bottom: 0.16rem;
            &:focus {
                border-bottom: 1px solid @mainColor;
            }
        }
        .form-material-sex {
            height: 0.45rem;
            display: block;
        }
        .mint-cell {
            float: left;
            width: 50%;
            margin-top: 1.24rem;
        }
        .form-material-name {
            margin-top: 0;
            height: 0.45rem;
            display: block;
            width: 100%;
        }
        .mint-cell-wrapper {
            .mint-radio-input:checked + .mint-radio-core {
                background-color: @mainColor;
                border-color: @mainColor;
            }
        }
    }
    .hint-sex {
        height: 0.5rem;
        border-top: 1px solid #e5e5e5;
        font-size: 0.24rem;
        color: #999;
        margin-top: 0.2rem;
        padding: 0.2rem 0.1rem 0 0;
    }
    .next-step-up {
        > .next-step-btn {
            width: 100%;
            background-color: @mainColor;
            margin-top: 1.6rem;
            height: 0.8rem;
            border-radius: 40px;
            color: #fff;
        }
    }
}
</style>


